<template>
  <div class="app-container bg-gray">
    <el-card class="box-1">
      <div slot="header">
        <span>添加題目</span>
      </div>
      <el-form ref="form" :model="form" :rules="formRules" label-width="160px">
        <el-form-item label="題目标题">
          <el-input v-model="form.name"/>
        </el-form-item>
        <el-form-item label="附图">
          <ws-upload-single-img v-model="form['annex']" :path="form['annex']"/>
        </el-form-item>
        <el-form-item label="必填">
          <el-radio-group v-model="form.must">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题目类型">
          <el-radio-group v-model="form.type">
            <el-radio :label="1">单选题</el-radio>
            <el-radio :label="2">多选题</el-radio>
            <el-radio :label="3">填空题</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form['type']!==3" label="题目选项">
          <el-input v-for="(questionAnswerItem, questionAnswerIndex) in form.option"
                    v-model="form['option'][questionAnswerIndex]['value']"
                    :key="questionAnswerIndex"
                    placeholder="请输入选项内容">
            <template slot="prepend">{{ answerIndex[questionAnswerIndex] }}</template>
            <el-button slot="append"
                       icon="el-icon-delete"
                       @click.prevent="removeItem('option', questionAnswerItem)"/>
          </el-input>
          <el-button type="info" size="small" plain style="margin-top: 5px;" @click.prevent="addItem('option')">新增选项</el-button>
        </el-form-item>
        <el-form-item label="正确答案">
          <el-radio-group v-if="form['type']===1" v-model="form.answer">
            <el-radio
              v-for="(questionAnswerItem, questionAnswerIndex) in form.option"
              :key="questionAnswerIndex" :label="questionAnswerIndex">
              {{ answerIndex[questionAnswerIndex] }}
            </el-radio>
          </el-radio-group>
          <el-checkbox-group v-else-if="form['type']===2" v-model="form.answer2">
            <el-checkbox v-for="(questionAnswerItem, questionAnswerIndex) in form.option"
                         :key="questionAnswerIndex" :label="questionAnswerIndex" >
              {{ answerIndex[questionAnswerIndex] }}
            </el-checkbox>
          </el-checkbox-group>
          <el-input v-else v-model="form.answer"/>
        </el-form-item>
        <el-form-item label="题目分数">
          <el-input-number v-model="form['fraction']"/>
        </el-form-item>
        <el-form-item label="题目分析">
          <ws-editor v-model="form['remarks']"/>
        </el-form-item>
        <el-form-item>
          <el-button :disabled="btnEnable" type="success" class="bg-green btn" @click="submitForm('form')">创建</el-button>
          <el-button type="info" class="btn" @click="$router.back(-1)">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      answerIndex: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],

      // 创建按钮是否可点击
      btnEnable: false,
      form: {
        id: '',
        name: '',
        annex: '',
        type: 1,
        must: 1,
        option: [{label: 'A', value: ''}],
        answer: 0,
        answer2: [],
        fraction: '',
        remarks: ''
      },
      formRules: {
        name: [{ required: true, message: '请输入题目标题', trigger: 'change' }]
      }
    }
  },
  watch: {},
  created() {
    this.form['id'] = this.$route.query.id;
  },
  methods: {
    // 动态删除项
    removeItem(paramsName, item) {
      const index = this.form[paramsName].indexOf(item);
      console.log(index)
      if (index !== 0) {
        this.form[paramsName].splice(index, 1);
      }
    },
    // 动态增加项
    addItem(paramsName) {
        this.form[paramsName].push({ label: '', value: '' })
    },

    submitForm(formName) {
      this.btnEnable = true;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = Object.assign({}, this.form);
          for (const i in data.option){
            data.option[i]['label'] = this.answerIndex[i];
          }
          data.option = JSON.stringify(data.option);
          if (data.type === 2) {
            data.answer = data.answer2.join(',')
          }
          const url = data.id ? 'exam/testAddSubject' : 'exam/addItemBatch';
          this.$store.dispatch('GetConnect', { url, data }).then(res => {
            this.$message.success(res.msg);
            this.$router.back(-1);
          }).catch((err) => {
            this.$message.error(err.msg);
            this.btnEnable = false;
          })
        } else {
          this.btnEnable = false;
          this.$message.error('提交失败,请检查必填项');
        }
      })
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../../styles/index.scss';

  .box-1 {
    max-width: 1000px;
    margin: 0 auto;

    > div span {
      font-size: 18px;
      font-weight: 600;
      padding: 0 10px;
    }

    .el-form {
      max-width: 900px;

      .title {
        font-weight: 600;
      }

      .remark {
        font-size: 13px;
        color: $textGray;
      }
      .checkbox{
        display: flex;
        flex-direction: column;
      }
    }
  }

  .btn {
    width: 20%;
    min-width: 160px;
  }

  .el-checkbox {
    margin-right: 30px;
  }

  .el-checkbox + .el-checkbox {
    margin-left: 0;
    margin-right: 30px;
  }
</style>
